<template>
  <div>
    <van-nav-bar>
      <template #title>
        <h4>量晶晶用户注册</h4>
      </template>
    </van-nav-bar>
    <br/>
    <van-form colon @submit="onSubmit">
      <van-cell-group inset :border="false">
        <van-field v-model="form.nickname" name="nickname" label="用户昵称" placeholder="请输入用户昵称"
                   :rules="[{ required: true }]"/>
        <van-field v-model="form.username" name="username" label="手机号码" placeholder="请输入手机号码"
                   :rules="[{ required: true }, {validator: checkPhoneNumber, message: '手机号码错误'}]"/>
        <van-field v-model="form.password" type="password" name="password" label="登录密码"
                   placeholder="请输入登录密码"
                   :rules="[{ required: true }, {validator: checkPassword, message: '请输入包含数字和字母8~30位密码'}]"/>
        <van-field v-model="form.again" type="password" name="again" label="确认密码"
                   placeholder="请再次输入登录密码"
                   :rules="[{ required: true }, {validator: checkAgain, message: '两次输入密码不一致'}]"/>
        <van-field
          v-model="form.captcha"
          type="digit"
          name="captcha"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button :disabled="count>0" size="small" type="primary" native-type="button" @click="sendCode">
              <span v-if="count>0">{{ count }}s</span>
              <span v-else>发送验证码</span>
            </van-button>
          </template>
        </van-field>
        <br/>
        <van-cell :border="false">
          <van-button round block type="info" native-type="submit">注册</van-button>
        </van-cell>
        <van-cell :border="false">
          <van-button plain round block type="info" native-type="button" @click="$router.push('/login')">
            已有账号，去登录
          </van-button>
        </van-cell>
        <br/>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script>
import {Dialog, Notify} from 'vant'
import {checkPhoneNumber, checkPassword, checkVerifyCode} from '@/validators'

export default {
  data() {
    return {
      timer: null,
      count: 0,
      form: {
        nickname: null,
        username: null,
        password: null,
        captcha: null,
        again: null
      }
    };
  },
  methods: {
    checkPhoneNumber: checkPhoneNumber,
    checkPassword: checkPassword,
    checkVerifyCode: checkVerifyCode,
    checkAgain() {
      return this.form.again === this.form.password
    },
    sendCode() {
      if (checkPhoneNumber(this.form.username)) {
        if (!this.timer) {
          this.count = 60;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= 60) {
              this.count--;
            } else {
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
        this.$requests.post('/aliyun/captcha', {phone_number: this.form.username, msg_type: 'register'}).then(resp => {
          if (resp) {
            Dialog.alert({title: '提示', message: '验证码已发送，5分钟内有效。（特别说明：因移动公司短信通道报备策略调整，无法收到短信的用户，请与管理员联系：19381632429）'})
          } else {
            Dialog.alert({
              title: '发送验证码失败',
              message: '触发流控限制：1条/分钟，5条/小时，10条/每日）',
            })
          }
        })
      } else {
        Notify({type: 'danger', message: '请检查输入手机号码是否正确'})
      }
    },
    onSubmit(form) {
      let payload = Object.assign(
        {
          parent_hex_id: this.$route.query.parent_hex_id
        },
        form
      )
      this.$requests.post('/aliyun/register', payload).then(resp => {
        if (resp) {
          Dialog.alert({
            title: '提示',
            message: '注册成功',
          }).then(() => {
            this.$router.push('/login')
          })
        }
      })
    },
  }
}
</script>

<style scoped>
h4 {
  color: #862c2d;
  text-align: center;
  width: 100%;

}
</style>
